<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__STATIC__/css/layui.css">
  <link rel="stylesheet" href="__STATIC__/css/view.css" />
  <link rel="icon" href="/favicon.ico">
  <title>管理后台</title>
  <style>
    .laytable-cell-1-shop_img{
            height: 100%;
        }
  </style>
</head>

<body class="layui-view-body">
  <div class="layui-content">
    <div class="layui-row">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="form-box">
            <!-- <button class="layui-btn layui-btn-blue" onclick="openAdd()"><i class="layui-icon">&#xe654;</i>新增</button> -->
            <table class="layui-table" lay-data="{height:'full-200', url:'{:url('Shop/shoplist')}', page:true, id:'test2', skin: 'row', even: true}"
              lay-filter="demo">
              <thead>
                <tr>
                  <th lay-data="{field:'id',sort: true}">id</th>
                  <th lay-data="{field:'shop_img', templet: '#sImg',height:'100px'}">商品图片</th>
                  <th lay-data="{field:'shop_title'}">商品名称</th>
                  <th lay-data="{field:'shop_desc',}">商品介绍</th>
                  <!-- <th lay-data="{field:'shop_value',}">规格</th> -->
                  <th lay-data="{title:'操作', templet: '#barDemo'}"></th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="sImg">
    {{# }}
          <img src="http://127.0.0.1/ljm/public/uploads/shop/{{ d.shop_img }}" alt="">
        {{# }}
      </script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">查看商品</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">刪除</a>
      </script>
  {include file="common/footer"}
  <script src="__STATIC__/layui.all.js"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;
      //监听工具条
      table.on('tool(demo)', function (obj) {
        var data = obj.data;
        if (obj.event === 'add') {
          openAdd(data);
        } else if (obj.event === 'edit') {
          edit(data.id);
        } else if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            del(data.id);
            layer.close(index);
          });
        }
      });
    })
    // 修改
    function edit(id){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '编辑商品'
        ,area: ['700px', '600px']
        ,shade: 0
        ,maxmin: true
        ,offset: 'auto'
        ,content: `edit?id=${id}`
        ,btn: ['关闭'] //只是为了演示
        ,yes: function(index){
          layer.close(index);
        },
        end:function(){
          window.location.reload();
        }
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
    }
    /*删除*/
    function del(id) {
      console.log(id)
      $.ajax({
        type: 'POST',
        url: "{:Url('Shop/shopDel')}",
        data: {
          "id": id
        },
        dataType: 'text',
        success: function (data) {
          window.location.reload();
        },
        error: function (data) {
          console.log(data.msg);
        },
      });
    }
    //打开商品详情
    function openAdd(data) {
      console.log(data)
      var that = this;
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
          ,
        title: data.shop_title,
        area: ['1200px', '700px'],
        shade: 0.8,
        maxmin: true,
        offset: 'auto',
        content: `info?shop_value=${data.id}`,
        btn: ['关闭'], //只是为了演示
        yes: function (index) {
          layer.close(index);
        },
        end:function(){
          window.location.reload();
        },
        zIndex: layer.zIndex, //重点1
        success: function (layero) {
          layer.setTop(layero); //重点2
        }
      });
    }
  </script>
</body>

</html>